<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 0px;
			height: 0px;
			border-left:50px solid transparent;
			border-right: 50px solid transparent;
			border-bottom : 50px solid red;
/*			transparent  颜色 透明*/
/*			background-color: orange;*/
			position: absolute;
/*			animation: one 5s linear 2s 3 alternate;*/


/*			animation: A B C D E F G H ;*/
/*			A 指的是关键帧动画的名字（必须写）    animation-name*/

/*			B 指的是动画完成需要的时间 必须写）   animation-duration*/

/*			C 指的是动画执行效果    animation-timing-function*/
/*				ease 由慢到快再到慢   
/*				linear 匀速执行   */

/*			D 动画开始前的延迟时间  单位是S   animation-delay*/ 

/*		·	E 动画播放的次数  默认为1 也可以写入数字 或者用关键字 infinite 无限次   animation-iteration-count*/

/*			F 设置动画播放的方向  reverse  永远反向播放  alternate 奇数次正向播放 偶数次反向播放  animation-direction*/

/*			G 设置动画播放结束后的效果（位置） forwards 动画结束后停留在最后一帧  backwards 动画播放结束后 回到第一帧 animation-fill-mode   both 及执行第一帧 也执行最后一阵*/

/*			H 设置动画暂停与播放  paused 暂停  running 播放  animation-play-state*/
		}

/*		关键帧  */
/*		创建关键帧动画*/
/*		@keyframes  动画的名字{}*/

		@keyframes one{
			0%{
				left: 0;
			}
			100%{
				left: 1000px;
			}
		}



		
	</style>
</head>
<body>


		<div class="box"></div>




</body>
</html>